<template>
  <div class="examlist_container">
    <div class="title">
      <h2>当前考试组</h2>
    </div>
    <div class="typeSelect">
      <van-field readonly clickable label="分类：" :value="value" placeholder="请选择分类" @click="showPicker = true" />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
    </div>

    <div class="examlist">
      <van-swipe :loop="false" :width="300">
        <van-swipe-item v-for="item in list" :key="item.id" @click="examDetails(item)">
           <img :src="item.themeUrl" alt="">
          <div class="content">
             <h2>
                {{item.introduce}}
              </h2>
            <van-button round type="info" class="more">立即开始</van-button>
          </div>
         
          
        </van-swipe-item>
      </van-swipe>
    </div>


<van-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" />
    <div class="examModal">
       <p>
        为了给您提供精准的模拟考试服务，请选择您的从业领域信息:
      </p>
      <van-field class="chooseType" readonly clickable label="分类 ：" :value="value" placeholder="请选择分类" @click="showPicker = true" />
    </div>
    

  </div>
</van-overlay>
  </div>
</template>
<style scoped>
.typestyle {
  color: rgba(112, 112, 112, 1);
  font-size: 14px;
  margin-right: 20px;
}
.typediv {
  float: left;
  margin-left: 20px;
}
.titlestyle {
  float: left;
  font-size: 14px;
  font-weight: normal;
  color: rgba(112, 112, 112, 1);
  opacity: 1;
  margin-top: 5px;
}
.updata_lable {
  font-size: 14px;
  margin-right: 20px;
}
.titlestyle1 {
  float: left;
  font-size: 14px;
  font-weight: normal;
  color: rgba(112, 112, 112, 1);
  opacity: 1;
  margin-top: 5px;
}
.typediv1 {
  float: left;
  margin-left: 20px;
}
</style>
<script>
import path from '@/network'
export default {
  name: 'App',

  data () {
    return {
      show: false,
      total: 0,
      pagesize: 50,
      currentPage: 1,
      list: [],
      value: '',
      showPicker: false,
      columns: [],
      defaultIndex: []
    };
  },

  created () {
  },
  beforeDestroy () {
  },

  mounted () {
    this.getField();
    // this.defaultIndex = sessionStorage.getItem("indexArr")
    // console.log('defaultIndex', this.defaultIndex)
  },

  methods: {
    onConfirm (value, index) {
      this.value = value;
      var indexArr = index;
      sessionStorage.setItem('typeValue', value)
      var checkedId = this.columns[indexArr[0]].children[indexArr[1]].id
      sessionStorage.setItem('lastTypeId', checkedId)
      this.getExamlist(checkedId)
      this.showPicker = false;
      this.show=false;
    },


    //获取field
    getField () {
      path.getField().then(res => {
        if (res.success === 0) {
          var data = res.rows;
          data.forEach(item => {
            var typeObj = {
              text: item.fieldName,
              id: item.id,
              children: []
            }
            item.l2s.forEach(items => {
              typeObj.children.push({
                text: items.fieldName,
                id: items.id
              })
            });
            this.columns.push(typeObj)
          });
        }
        var lastTypeId = sessionStorage.getItem('lastTypeId')
        if (lastTypeId) {
          this.show=false;
          this.getExamlist(lastTypeId)
          var typeValue = sessionStorage.getItem('typeValue')
          this.value = typeValue
        }else{

            this.show=true;
        }

      })
    },

    //获取list
    getExamlist (id) {
      path.getExamlist(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          this.list = res.rows;
        }

      })
    },
    examDetails: function (item) {
      sessionStorage.setItem('examInfo', JSON.stringify(item))
      this.$router.push({ name: 'examInfo', query: { id: item.id, } })
    },


  }

}
</script>